<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%@ include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
        <title> 车友会 </title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="lijun_gz none" />
        <link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2014/touch/cyh.css">
    </head>

    <body class="g-doc" style="background: #f5f5f5">
        <!--栏目计数器/文章计数器-->
        <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7474" />
        </jsp:include>
        <%@include file="../common/intf6007.html" %>
        <!-- 公共头部 -->
        <div class="g-hd">
            <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
            <div class="header-title"><span class="header-title-home">车友会</span></div>
            <a class="g-hd-btnA" href="${WAPROOT}/select/" id="Jsignbtn">筛选</a>
        </div>

        <div id="J_focus" class="slider-top">
            <div class="slider-top-wrap J_slideWrap" id="sliderTop">


            </div>
            <div class="slider-top-doc J_slideNav"></div>
        </div>

        <div class="m-mycyh" id="clubList" style="display: none;">
            <p class="m-mycyh-p">我的车友会 (<i id="clubStatus"></i>)</p>
            <div id="myClub">

            </div>
        </div>
        <div class="m-download">
            <a href="http://www1.pcauto.com.cn/app/download/20140815/cyh_downapp.html">
                <img alt="download" width="65" height="65" src="http://www1.pcauto.com.cn/g20140805/cyh/images/download.png" style="opacity: 1; transition: 200ms; -webkit-transition: 200ms;">
                <div class="m-txt">
                    <div class="m-th">中国车友会移动客户端</div>
                    <div class="m-tb">加入车友会，点击领取福利</div>
                    <i class="m-download-btn">点击下载</i>
                </div>
            </a>
        </div>
        <div class="m-cynav">
            <a href="${WAPROOT}/top/">车友会排行榜</a>
            <a href="${WAPROOT}/city/">同城车友会</a>
        </div>

        <div class="m-hdrj">
            <p class="m-hdrj-p">热门活动日记</p>
            <div id="hostDiary">

            </div>
            <div class="btn-more" id="showMore"><a id="J-more" onclick="loadMore();">点击查看更多</a></div>
        </div>


        <div id="Jfoot" class="g-footer">
            <!-- 公共底部 -->
            <%@include file="../common/intf5987.html" %>
        </div>
        <script type="text/javascript" src="http://js.3conline.com/wap/2013/common/js/zepto1.1.min.js" ></script>
        <script src="http://js.3conline.com/wap/common/swipe.extend-min.js" charset="utf-8"></script>
        <script type="text/javascript">
            /*焦点图*/
            function slide(elem) {
                var nav = elem.querySelector("div.J_slideNav");
                elem.GfocusSlide = swipe(elem, {
                    auto: 5000,
                    speed: 100,
                    //    continuous: true,
                    nav: nav
                });
                return elem.GfocusSlide;
            }
            var pageNo=1;
            var pageSize = 8;
            var diaryHtml = "<a class=\"m-hdrj-item\" href=\"{topicUrl}\">"
                //+"<img src=\"{imgUrl}\"/>"
                +"<div class=\"m-hdrj-text\"><p>{title}</p>"
                +"{date} <i>{nickName}</i></div></a>";
            var clubHtml = "<a class=\"m-cylist-item\" href=\"{clubUrl}\"><div class=\"m-cylist-pictext\">"
                +"<span class=\"m-cylist{isLock}\"><img src=\"{clubImg}\">"
                +"</span><div class=\"m-cylist-text\"><p>{name}</p><i class=\"star\"><em style=\"width:{level}%\"></em></i>"
                +"<span><i>会员：{memberNum}人</i> <i>油值：{petrol}L</i></span><span><i>地区：{clubAddress}</i>"
                +"<i>车系：{seriesName}</i></span></div></div></a>";
            var imgHtml = "<div class=\"slider-top-pic\"><a href=\"{url}\" title=\"{url}\">"
                +"<img src=\"{img}\"/></a></div>"
       
            function listActivityDiary(spageNo){
                $.getJSON("${ROOT}/activity/listHostActivityDiary.do?req_enc=utf-8&resp_enc=utf-8&callback=?",{pageNo:spageNo,size:pageSize},function(data){
                    if(data.code==0){
                        var result = data.data;
                        var html  = "";
                        for(var i=0;i<result.length;i++){
                            var d = result[i];
                            //html+=diaryHtml.replace(/{title}/ig,d.title).replace(/{imgUrl}/ig,(d.logo==""?"http://www1.pcauto.com.cn/wap/g20140509/cyh/img/holder_270x200.jpg":d.logo)).replace(/{clubName}/ig,d.clubName).replace(/{nickName}/ig,d.nickname).replace(/{date}/ig,formatDate(new Date(d.pubTime))).replace(/{topicUrl}/ig,"${BBSWAPROOT}/topic-"+d.topicId+".html");
                            html+=diaryHtml.replace(/{title}/ig,d.title).replace(/{clubName}/ig,d.clubName).replace(/{nickName}/ig,d.nickname).replace(/{date}/ig,formatDate(new Date(d.pubTime))).replace(/{topicUrl}/ig,"${BBSWAPROOT}/topic-"+d.topicId+".html");
                        }
                        $("#hostDiary").append(html);
                        pageNo = data.pageNo;
                        if(pageNo >= data.pageCount || pageNo==50){
                            $("#showMore").hide();
                        }
                    }
                });
            }
            function getMyClub(){
                $.getJSON("${ROOT}/club/getJoinedClubListByUser.do?callback=?",{req_enc:"utf-8",resp_enc:"utf-8"},function(data){
                    if(data.code==0){
                        var result = data.data;
                        var len = result.length;
                        var html = "";
                        var type = false;
                        if(len>0){
                            for(var i = 0;i<len;i++){
                                var d = result[i];
                                html+=clubHtml.replace(/{name}/ig,d.name).replace(/{seriesName}/ig,(d.seriesName ? d.seriesName : d.brandName ? d.brandName : '--')).replace(/{petrol}/ig,d.totalPetrol).replace(/{memberNum}/ig,d.memberNum).replace(/{clubImg}/ig,d.logo==""?"http://www1.pcauto.com.cn/wap/g20140509/cyh/img/holder_270x200.jpg":d.logo).replace(/{clubAddress}/ig,((d.provinceName.indexOf("北京")>-1 || d.provinceName.indexOf("上海")>-1 ||d.provinceName.indexOf("天津")>-1 || d.provinceName.indexOf("重庆")>-1)?d.provinceName:(d.cityName=="")?(d.provinceName==""?"--":d.provinceName):d.cityName)).replace(/{level}/ig,d.level*20).replace(/{clubUrl}/ig,"${WAPROOT}/"+d.clubUrl+"/").replace(/{isLock}/ig,d.clubStatus==4?"-picspan":"");
                                if(d.status==1){
                                    type=true;
                                }
                            }
                            if(type){
                                $("#clubStatus").html("已加入");
                            }else{
                                $("#clubStatus").html("审核中");
                            }
                            $("#myClub").append(html);
                            $("#clubList").show();
                        }
            
                    }
                });
            }
            function loadImg(){
                $.ajax({
                    type:"get",
                    dataType : "jsonp",
                    url:"http://www.pcauto.com.cn/forum/club/activeapp/1407/intf4107.js",
                    jsonpCallback:"callback",
                    success:function(data){
                        var result = data.activelist;
                        var html = "";
                        for(var i = 0;i<result.length;i++){
                            html += imgHtml.replace(/{url}/ig,result[i].url).replace(/{img}/ig,result[i].img).replace(/{title}/ig,result[i].title);
                        }
                        $("#sliderTop").append(html);
                        var _focus = document.getElementById('J_focus');
                        slide(_focus).stop();
                        setTimeout(function() {
                            _focus.GfocusSlide.start();
                        }, 100)
                    }
                });
            }
            function loadMore(){
                listActivityDiary(pageNo+1);
            }
            function formatDate(d) {
                var D=['00','01','02','03','04','05','06','07','08','09']
                with (d || new Date) return [
                    [D[getFullYear()%100] || getFullYear()%100,D[getMonth()+1]||getMonth()+1, D[getDate()]||getDate()].join('-'),
                    [D[getHours()]||getHours(), D[getMinutes()]||getMinutes()].join(':')
                ].join(' ');
            }
            $(document).ready(function(){
                loadImg();
                getMyClub();
                listActivityDiary(1);
            });
        </script>
    </body>
</html>